<!DOCTYPE html>
<html>
<head>
    <title>用户列表222</title>
    <#include "/common/common.ftl">
</head>
<body>
<div id="app">
    <el-form :model="query" :inline="true">
        <el-form-item label="姓名:" label-width="80px">
            <el-input v-model="query.name"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" label-width="80px">
            <el-input v-model="query.name"></el-input>
        </el-form-item>
        <el-button type="primary" @click="loadPage('query')">查询</el-button>
    </el-form>


    <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
        <el-table-column prop="userName" label="姓名" width="180"></el-table-column>
        <el-table-column prop="loginName" label="登陆名" width="180"></el-table-column>
        <el-table-column prop="baName" label="部门" width="180"></el-table-column>
        <el-table-column prop="bapName" label="机构" width="180"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 200, 500]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script type="module">
    import api from '../js/common/api.js'

    let that = new Vue({
        el: '#app',
        data: function () {
            return {
                pageSize: 10,
                currentPage: 1,
                total: null,
                loading: true,
                tableData: [],
                query: {},
                user: {
                    userName: '',
                    loginName: '',
                    baName: '',
                    bapName: '',
                    email: '',
                    phone: '',
                    status: '',
                    createTime: '',
                },

            }
        },
        created() {

        },
        mounted() {
            this.loadPage()
            // this.reload()
        },
        methods: {
            loadPage(action) {
                let that = this
                if (action === 'query') {
                    that.currentPage = 1
                }
                let request = {
                    pageSize: that.pageSize,
                    currentPage: that.currentPage,
                }

                that.loading = true
                api.userLoadPage(request).then(res => {
                    // console.log(res)
                    if (res.code === 20000) {
                        // this.$message({
                        //     message: '查询成功',
                        //     center: true,
                        //     type: 'success'
                        // });
                        that.loading = false
                        that.tableData = res.data.records
                        that.total = res.data.total
                    }
                })
                // axios.get('../sys/user/loadPage').then(res => {
                //     that.loading = false
                //     that.tableData = res.data.data.list
                // }).catch(function (err) {
                //     console.log(err);
                // })
            },
            reload() {
                let that = this
                that.loading = true
                $.get("../sys/user/loadPage", result => {
                    that.loading = false
                    that.tableData = result.data.list
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadPage();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadPage();
            }
        }
    })
</script>
</body>
</html>
